<template>
  <div>
    <div style="padding: 1vh;">
      <el-button type="text"
                 class="staff-lookMoreBtn"
                 style="float: right;color: white;font-size: 0.9vw"
                 @click="goview('通知栏')">
        查看更多...
      </el-button>
    </div>
    <div class="card_div">
      <el-carousel trigger="click" height="35vh" indicator-position="outside" :interval=20000>
        <el-carousel-item v-for="notice in notices" :key="notice.id">
          <div class="notice" @click="goViewWithQuery('查看通知', notice.id)">
            <div class="notice_header">
              {{notice.title}}
            </div>
            <div v-if="notice.content!==''" class="notice_main pre-line"  v-html="notice.content"></div>
            <div v-else-if="notice.files.length!==0" class="notice_main">
<!--            <div class="notice_main">-->
<!--              <el-image style="width: 100%; height: 100%" fit="fill" src="https://img-blog.csdnimg.cn/2019041109152357.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzkzODY5,size_16,color_FFFFFF,t_70"></el-image>-->
              <el-carousel trigger="click" height="35vh" indicator-position="outside" :interval=5000>
                <el-carousel-item v-for="file in notice.files" :key="file.name">
                  <el-image style="width: 100%; height: 100%" fit="contain" v-if="matchType(file.name)==='image'" :src="baseUrl+'/'+file.url"></el-image>
                </el-carousel-item>
              </el-carousel>
<!--              <el-image style="width: 100%; height: 100%" fit="contain" v-if="matchType(notice.files[0].name)==='image'" :src="baseUrl+'/'+notice.files[0].url"></el-image>-->
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import request from '../../../../../network/request'
import { baseURL } from '@/config/baseConfig'
export default {
  name: 'noticeColumn',
  data () {
    return {
      notices: [],
      baseUrl: baseURL
    }
  },
  mounted () {

  },
  created () {
    request({
      method: 'post',
      url: '/bulletin/show3notifications',
      params: {
      }
    }).then(res => {
      this.notices = res.data.data
    }).catch((error) => {
      console.log(error)// 异常
    })
    // var header = document.getElementsByClassName('notice_header')
    // var content = document.getElementsByClassName('notice_main')
    // var notice = document.getElementsByClassName('notice')
    // console.log('header')
    // console.log(header)
    // console.log('notice')
    // console.log(notice)
    // // setTimeout(1000)
    // var headers = Array.from(header)
    // var contents = Array.from(content)
    // var notices = Array.from(notice)
    // // const headers = Array.from(document.getElementsByClassName('notice_header'))
    // console.log(content)
    // for (var i = 0; i < contents.length; i++) {
    //   contents[i].style.height = (Number(notices[i].style.height) - Number(headers[i].style.height)) + 'px'
    //   console.log(contents[i].style.height)
    // }
  },
  methods: {
    goview (name) {
      this.$router.push({ name }).catch(err => {
        err && console.log('刷新') // 待优化
      })
    },
    goViewWithQuery (name, data) {
      console.log('请求' + data + '通知')
      this.$router.push({ name, query: { data: data } }).catch(err => {
        err && console.log('刷新') // 待优化
      })
    }, // 根据文件名后缀区分 文件类型
    /*
     * @param: fileName - 文件名称
     * @param: 数据返回 1) 无后缀匹配 - false
     * @param: 数据返回 2) 匹配图片 - image
     */
    matchType (fileName) {
      // 后缀获取
      var suffix = ''
      // 获取类型结果
      var result = ''
      try {
        var flieArr = fileName.split('.')
        suffix = flieArr[flieArr.length - 1]
      } catch (err) {
        suffix = ''
      }
      // fileName无后缀返回 false
      if (!suffix) {
        result = false
        return result
      }
      // 图片格式
      var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      // 进行图片匹配
      result = imglist.some(function (item) {
        return item === suffix
      })
      if (result) {
        result = 'image'
        return result
      };
      // 其他 文件类型
      result = 'other'
      return result
    }
  }
}
</script>

<style scoped>
>>>::-webkit-scrollbar {
  width: 0.75rem;
  height: 0.75rem;
}
>>>::-webkit-scrollbar-track {
  border-radius: 0;
}
>>>::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: rgba(14,16,54,0);
  transition: all 0.2s;
  border-radius: 0.25rem;
}
>>>::-webkit-scrollbar-corner{
  background: rgba(14, 16, 54,0);
}
.card_div {
  margin: 30px;
  height: 36vh;
  background-color: rgba(0,0,0,0.4);
}

/* 通知栏走马灯 */
.notice {
  cursor:pointer;
  color: white;
  height: 38vh;
  width: 100%;
  border: none;
}

.notice_header {
  font-size: 1.0vw;
  padding: 10px 20px;
  /*height: 3vh;*/
  text-align: center;
}

.notice_main {
  /*verticle-align:middle;*/
  /*margin: auto 0 10px 0;*/
  height: 67%;
  overflow-y: auto;
  padding: 5px 20px;
  font-size: 0.8vw;
}
.pre-line {
  white-space: pre-line;
}
</style>
